<template>
  <view>
    <view
      v-if="showHeader"
      class="status"
      :style="{ position: headerPosition, top: statusTop }"
    ></view>
    <view
      v-if="showHeader"
      class="header"
      :style="{ position: headerPosition, top: headerTop }"
    >
      <view class="title">购物车</view>
    </view>
    <!-- 占位 -->
    <view v-if="showHeader" class="place"></view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <view class="tis" v-if="!customerId" @tap="toLogin">请先登录</view>
      <view class="tis" v-else-if="goodsList.length == 0">购物车是空的哦~</view>
      <view class="row" v-for="(row, index) in goodsList" :key="index">
        <!-- 删除按钮 -->
        <view class="menu" @tap.stop="deleteGoodsOne(row.id)">
          <view class="icon shanchu"></view>
        </view>
        <!-- 商品 -->
        <view
          class="carrier"
          :class="[
            theIndex == index ? 'open' : oldIndex == index ? 'close' : '',
          ]"
          @touchstart="touchStart(index, $event)"
          @touchmove="touchMove(index, $event)"
          @touchend="touchEnd(index, $event)"
        >
          <!-- checkbox -->
          <view class="checkbox-box" @tap="selected(index)">
            <view class="checkbox">
              <view :class="[row.selected ? 'on' : '']"></view>
            </view>
          </view>
          <!-- 商品信息 -->
          <view class="goods-info" @tap="toGoods(row)">
            <view class="img">
              <image
                :src="
                  row.pImgUrl
                    ? BASE_URL + row.pImgUrl.split(',')[0]
                    : '/static/img/category/3.png'
                "
              ></image>
            </view>
            <view class="info">
              <view class="title">{{ row.pName }}</view>
              <view class="spec">{{ row.pSpecifications }}</view>
              <view class="price-number">
                <view class="price">￥{{ row.pPrice }}</view>
                <view class="number">
                  <view class="sub" @tap.stop="sub(index)">
                    <view class="icon jian"></view>
                  </view>
                  <view class="input" @tap.stop="discard">
                    <input
                      type="number"
                      v-model="row.number"
                      @input="sum($event, index)"
                    />
                  </view>
                  <view class="add" @tap.stop="add(index)">
                    <view class="icon jia"></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 脚部菜单 -->
    <view class="footer" :style="{ bottom: footerbottom }">
      <view class="checkbox-box" @tap="allSelect">
        <view class="checkbox">
          <view :class="[isAllselected ? 'on' : '']"></view>
        </view>
        <view class="text">全选</view>
      </view>
      <view class="delBtn" @tap="deleteList" v-if="selectedList.length > 0"
        >删除</view
      >
      <view class="settlement">
        <view class="sum"
          >合计:<view class="money">￥{{ sumPrice }}</view></view
        >
        <view class="btn" @tap="toConfirmation"
          >结算({{ selectedList.length }})</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import {
  getCartList,
  deleteCart,
  updateCart,
  deleteCartList,
} from "@/common/api/car.js";
import { checkUserInfo } from "@/common/utils/index.js";
import {
  add,
  multiply,
  calculateOrderTotal,
  safeNumber,
} from "@/common/utils/precision.js";
import { BASE_URL } from "@/common/utils/request.js";
export default {
  data() {
    return {
      sumPrice: "0.00",
      headerPosition: "fixed",
      headerTop: null,
      statusTop: null,
      showHeader: true,
      selectedList: [], //选中商品
      isAllselected: false,
      goodsList: [],
      //控制滑动效果
      theIndex: null,
      oldIndex: null,
      isStop: false,
      customerId: uni.getStorageSync("userInfo").id || "",
      BASE_URL: BASE_URL,
    };
  },
  onPageScroll(e) {
    //兼容iOS端下拉时顶部漂移
    this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
    this.headerTop = e.scrollTop >= 0 ? null : 0;
    this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + "px";
  },
  //下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
  onPullDownRefresh() {
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onLoad() {
    //兼容H5下结算条位置
    // #ifdef H5
    this.footerbottom =
      document.getElementsByTagName("uni-tabbar")[0].offsetHeight + "px";
    // #endif
    // #ifdef APP-PLUS
    this.showHeader = false;
    this.statusHeight = plus.navigator.getStatusbarHeight();
    // #endif
  },
  onShow() {
    this.selectedList = [];
    this.isAllselected = false;
    this.sumPrice = 0;
    this.customerId = uni.getStorageSync("userInfo").id || "";
    this.getCartListFunc();
  },
  methods: {
    toLogin() {
      uni.showToast({ title: "请先登录", icon: "none" });
      uni.navigateTo({
        url: "/pages/login/pre-login",
      });
    },
    // 购物车列表
    getCartListFunc() {
      if (!this.customerId) {
        this.goodsList = [];
        return;
      }
      const customerId = this.customerId;
      getCartList(customerId)
        .then((res) => {
          if (res.data && res.data.ok) {
            // 处理后端返回的数据，映射到前端期望的字段
            const mappedData = res.data.data.map((item) => ({
              id: item.id,
              pImgUrl: item.product?.pImgUrl || "",
              pName: item.product?.pName || "商品名称",
              pSpecifications: item.product?.pSpecifications || "默认规格",
              pPrice: parseFloat(item.product?.pPrice || 0),
              number: parseInt(item.quantity || 1),
              selected: false,
              productId: item.productId,
              customerId: item.customerId,
            }));
            this.goodsList = mappedData;
          } else {
            this.goodsList = [];
          }
        })
        .catch((err) => {
          this.goodsList = [];
        });
    },
    //控制左滑删除效果-begin
    touchStart(index, event) {
      //多点触控不触发
      if (event.touches.length > 1) {
        this.isStop = true;
        return;
      }
      this.oldIndex = this.theIndex;
      this.theIndex = null;
      //初始坐标
      this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
    },
    touchMove(index, event) {
      //多点触控不触发
      if (event.touches.length > 1) {
        this.isStop = true;
        return;
      }
      let moveX = event.touches[0].pageX - this.initXY[0];
      let moveY = event.touches[0].pageY - this.initXY[1];

      if (this.isStop || Math.abs(moveX) < 5) {
        return;
      }
      if (Math.abs(moveY) > Math.abs(moveX)) {
        // 竖向滑动-不触发左滑效果
        this.isStop = true;
        return;
      }

      if (moveX < 0) {
        this.theIndex = index;
        this.isStop = true;
      } else if (moveX > 0) {
        if (this.theIndex != null && this.oldIndex == this.theIndex) {
          this.oldIndex = index;
          this.theIndex = null;
          this.isStop = true;
          setTimeout(() => {
            this.oldIndex = null;
          }, 150);
        }
      }
    },
    touchEnd(index, $event) {
      //结束禁止触发效果
      this.isStop = false;
    },
    //控制左滑删除效果-end
    //商品跳转
    toGoods(e) {
      uni.showToast({ title: "商品" + e.productId, icon: "none" });
      uni.navigateTo({
        url: "../../goods/goods?id=" + e.productId,
      });
    },
    //跳转确认订单页面
    toConfirmation() {
      // 校验用户的必填信息是否完整
      if (!checkUserInfo()) {
        return;
      }
      let tmpList = [];
      let len = this.goodsList.length;
      for (let i = 0; i < len; i++) {
        if (this.goodsList[i].selected) {
          tmpList.push(this.goodsList[i]);
        }
      }
      if (tmpList.length < 1) {
        uni.showToast({
          title: "请选择商品结算",
          icon: "none",
        });
        return;
      }
      uni.setStorage({
        key: "buylist",
        data: tmpList,
        success: () => {
          uni.navigateTo({
            url: "../../order/confirmation",
          });
        },
      });
    },
    //删除商品
    deleteGoods(id) {
      uni.showLoading({ title: "删除中..." });
      deleteCart(id)
        .then((res) => {
          uni.hideLoading();
          if (res.data && res.data.ok) {
            let len = this.goodsList.length;
            for (let i = 0; i < len; i++) {
              if (id == this.goodsList[i].id) {
                this.goodsList.splice(i, 1);
                break;
              }
            }
            this.selectedList.splice(this.selectedList.indexOf(id), 1);
            this.sum();
            this.oldIndex = null;
            this.theIndex = null;
            uni.showToast({ title: "删除成功" });
          } else {
            uni.showToast({
              title: res.data?.message || "删除失败",
              icon: "none",
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({ title: "删除失败", icon: "none" });
        });
    },
    // /删除商品
    deleteGoodsOne(id) {
      uni.showLoading({ title: "删除中..." });
      deleteCart(id)
        .then((res) => {
          uni.hideLoading();
          if (res.data && res.data.ok) {
            let len = this.goodsList.length;
            for (let i = 0; i < len; i++) {
              if (id == this.goodsList[i].id) {
                this.goodsList.splice(i, 1);
                break;
              }
            }
            this.selectedList.splice(this.selectedList.indexOf(id), 1);
            this.sum();
            this.oldIndex = null;
            this.theIndex = null;
            uni.showToast({ title: "删除成功" });
          } else {
            uni.showToast({
              title: res.data?.message || "删除失败",
              icon: "none",
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({ title: "删除失败", icon: "none" });
        });
    },
    // 删除商品s
    deleteList() {
      deleteCartList(this.customerId, this.selectedList).then((res) => {
        if (res.data.ok) {
          this.selectedList = [];
          this.isAllselected =
            this.selectedList.length == this.goodsList.length &&
            this.goodsList.length > 0;
          this.sumPrice = 0;
          uni.showToast({ title: "删除成功", icon: "success" });
          this.getCartListFunc();
        } else {
          uni.showToast({
            title: res.data?.message || "删除失败",
            icon: "none",
          });
        }
      });
    },
    // 选中商品
    selected(index) {
      this.goodsList[index].selected = this.goodsList[index].selected
        ? false
        : true;
      let i = this.selectedList.indexOf(this.goodsList[index].id);
      i > -1
        ? this.selectedList.splice(i, 1)
        : this.selectedList.push(this.goodsList[index].id);
      this.isAllselected = this.selectedList.length == this.goodsList.length;
      this.sum();
    },
    //全选
    allSelect() {
      let len = this.goodsList.length;
      let arr = [];
      for (let i = 0; i < len; i++) {
        this.goodsList[i].selected = this.isAllselected ? false : true;
        arr.push(this.goodsList[i].id);
      }
      this.selectedList = this.isAllselected ? [] : arr;
      this.isAllselected =
        this.isAllselected || this.goodsList.length == 0 ? false : true;
      this.sum();
    },
    // 减少数量
    sub(index) {
      if (this.goodsList[index].number <= 1) {
        return;
      }
      const newQuantity = this.goodsList[index].number - 1;
      this.updateCartQuantity(index, newQuantity);
    },
    // 增加数量
    add(index) {
      const newQuantity = this.goodsList[index].number + 1;
      this.updateCartQuantity(index, newQuantity);
    },
    // 更新购物车商品数量
    updateCartQuantity(index, newQuantity) {
      const item = this.goodsList[index];
      updateCart(item.id, { quantity: newQuantity.toString() })
        .then((res) => {
          if (res.data && res.data.ok) {
            this.goodsList[index].number = newQuantity;
            this.sum();
          } else {
            uni.showToast({
              title: res.data?.message || "更新失败",
              icon: "none",
            });
          }
        })
        .catch((err) => {
          uni.showToast({ title: "更新失败", icon: "none" });
        });
    },
    // 合计 - 使用精度工具避免浮点数精度问题
    sum(e, index) {
      // 如果是输入框触发的更新，先更新后端数据
      if (e && typeof index !== "undefined") {
        const newQuantity = safeNumber(e.detail.value, 1);
        this.updateCartQuantity(index, newQuantity);
        return; // updateCartQuantity 成功后会重新调用 sum()
      }

      // 使用精度工具计算总价
      const selectedItems = this.goodsList.filter((item) => item.selected);
      const totalPrice = calculateOrderTotal(
        selectedItems.map((item) => ({
          quantity: safeNumber(item.number, 0),
          price: safeNumber(item.pPrice, 0),
        })),
        2
      );

      this.sumPrice = totalPrice.toFixed(2);
    },
    discard() {
      //丢弃
    },
  },
};
</script>
<style lang="scss">
page {
  position: relative;
  background-color: #fff;
}
.checkbox-box {
  display: flex;
  align-items: center;
  .checkbox {
    width: 35upx;
    height: 35upx;
    border-radius: 100%;
    border: solid 2upx #f06c7a;
    display: flex;
    justify-content: center;
    align-items: center;
    .on {
      width: 25upx;
      height: 25upx;
      border-radius: 100%;
      background-color: #f06c7a;
    }
  }
  .text {
    font-size: 28upx;
    margin-left: 10upx;
  }
}
.status {
  width: 100%;
  height: 0;
  position: fixed;
  z-index: 10;
  background-color: #fff;
  top: 0;
  /*  #ifdef  APP-PLUS  */
  height: var(--status-bar-height); //覆盖样式
  /*  #endif  */
}

.header {
  width: 92%;
  padding: 0 4%;
  height: 100upx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: #fff;
  /*  #ifdef  APP-PLUS  */
  top: var(--status-bar-height);
  /*  #endif  */
  .title {
    font-size: 36upx;
  }
}
.place {
  background-color: #ffffff;
  height: 100upx;
  /*  #ifdef  APP-PLUS  */
  margin-top: var(--status-bar-height);
  /*  #endif  */
}
.goods-list {
  width: 100%;
  padding: 20upx 0 120upx 0;
  .tis {
    width: 100%;
    height: 60upx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32upx;
  }
  .row {
    width: calc(92%);
    height: calc(22vw + 40upx);
    margin: 20upx auto;

    border-radius: 15upx;
    box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 4;
    border: 0;
    .menu {
      .icon {
        color: #fff;
        // font-size: 25upx;
      }
      position: absolute;
      width: 30%;
      height: 100%;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: red;
      color: #fff;
      z-index: 2;
    }
    .carrier {
      @keyframes showMenu {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-30%);
        }
      }
      @keyframes closeMenu {
        0% {
          transform: translateX(-30%);
        }
        100% {
          transform: translateX(0);
        }
      }
      &.open {
        animation: showMenu 0.25s linear both;
      }
      &.close {
        animation: closeMenu 0.15s linear both;
      }
      background-color: #fff;
      .checkbox-box {
        padding-left: 20upx;
        flex-shrink: 0;
        height: 22vw;
        margin-right: 20upx;
      }
      position: absolute;
      width: 100%;
      padding: 0 0;
      height: 100%;
      z-index: 3;
      display: flex;
      align-items: center;

      .goods-info {
        width: 100%;
        display: flex;
        padding-right: 20upx;
        .img {
          width: 22vw;
          height: 22vw;
          border-radius: 10upx;
          overflow: hidden;
          flex-shrink: 0;
          margin-right: 10upx;
          image {
            width: 22vw;
            height: 22vw;
          }
        }
        .info {
          width: 100%;
          height: 22vw;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          position: relative;
          .title {
            width: 100%;
            font-size: 28upx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            // text-align: justify;
            overflow: hidden;
          }
          .spec {
            font-size: 20upx;
            background-color: #f3f3f3;
            color: #a7a7a7;
            height: 30upx;
            display: flex;
            align-items: center;
            padding: 0 10upx;
            border-radius: 15upx;
            margin-bottom: 20vw;
          }
          .price-number {
            position: absolute;
            width: 100%;
            bottom: 0upx;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            font-size: 28upx;
            height: 60upx;
            .price {
              color: #333;
            }
            .number {
              display: flex;
              justify-content: center;
              align-items: flex-end;
              .input {
                width: 60upx;
                height: 60upx;
                margin: 0 10upx;
                background-color: #f3f3f3;
                input {
                  width: 60upx;
                  height: 60upx;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  text-align: center;
                  font-size: 26upx;
                }
              }
              .sub,
              .add {
                width: 45upx;
                height: 45upx;
                background-color: #f3f3f3;
                border-radius: 5upx;
                .icon {
                  font-size: 22upx;
                  width: 45upx;
                  height: 45upx;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }
  }
}
.footer {
  width: 92%;
  padding: 0 4%;
  background-color: #fbfbfb;
  height: 100upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28upx;
  position: fixed;
  bottom: 0upx;
  z-index: 5;
  .delBtn {
    border: solid 1upx #f06c7a;
    color: #f06c7a;
    padding: 0 30upx;
    height: 50upx;
    border-radius: 30upx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .settlement {
    width: 60%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .sum {
      width: 50%;
      font-size: 28upx;
      margin-right: 10upx;
      display: flex;
      justify-content: flex-end;
      .money {
        font-weight: 600;
      }
    }
    .btn {
      padding: 0 30upx;
      height: 50upx;
      background-color: #f06c7a;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;

      border-radius: 30upx;
    }
  }
}
</style>
